<!-- loading.vue 加载特效 -->
<template>
  <div class="loading">
    <!-- 波浪加载 -->
    <div class="wave">
      <WaveLoading />
    </div>
    <div class="circles">
      <CirclesLoading />
    </div>
    <div class="picMen">
      <PacManLoading />
    </div>
    <div class="breathe">
      <BreatheLoading />
    </div>
  </div>
</template>

<script setup lang="ts">
  import WaveLoading from '@/components/loading/WaveLoading.vue'
  import CirclesLoading from '@/components/loading/CirclesLoading.vue'
  import PacManLoading from '@/components/loading/PacManLoading.vue'
  import BreatheLoading from '@/components/loading/BreatheLoading.vue'
</script>

<style scoped lang="scss">
  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--art-main-bg-color);
    border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
    border: 1px solid var(--art-card-border) !important;
    // padding: 20px;
    .wave {
      // height: 100px;
    }
  }
</style>
